
import React , { Component } from 'react';
import DaoDemo2 from '../../../components/dragDemo2/daoDemo2';
import {connect} from 'react-redux';
import {initDaosDataList2,initdocData,initmbData,doNull} from '../../../redux/actions';   //,getDaosMbShow

import {removeDocDataList,removeDepthData} from '../../../utils/storageUtils';

 
class DataComparison extends Component {
  state = {
    isFixed: false
  }

  //定义handleScroll事件函数
  handleScroll =(e)=>{
    //console.log("当前滚动条位置",this._container.scrollTop);
    // this.setState({
    //   scrollLeft: this._container.scrollLeft
    // })
    if(this._container.scrollTop >= 267){  //if语句判断window页面Y方向的位移是否大于或者等于导航栏的height像素值
      this.setState({
        isFixed: true
      })
      console.log("超过265，固定div");
    }else{
      this.setState({
        isFixed: false
      })
      //console.log("未超过265，取消固定div")    
    }
  } 

  componentDidMount() {
    // window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount(){    // 换页的时候会被调用
    //console.log("即将被卸载！");
    removeDocDataList();  // 清空 内存中的文件
    removeDepthData();  // 清空 内存中的 初始深度
    this.props.initDaosDataList2([]);  // 清空 reducer中的 模板数据
    this.props.initdocData({});  // 清空 reducer中的 文件
    this.props.initmbData([]);   // 清空 reducer中的 模板
    // window.removeEventListener('scroll', this.HandleScroll); // 移除监听
    document.querySelector('body').style.overflow = 'auto';
    this.props.doNull(!this.props.isDoNull);   // 清空侧边栏
  }

  render() {
    return (
      <div className="depth-two-dim-wrapper" >
        <div className="content">
            <div 
              className="content-right" 
              ref={c => this._container = c} 
              // onScrollCapture={this.handleScroll}
            >
              <div className="show-content"> 
                  <DaoDemo2 daosDataList={this.props.daosDataList2} isFixed={this.state.isFixed}/>
              </div>
            </div>      
        </div>
      </div> 
    )    
  }
}

export default connect(
  state => ({daosDataList2: state.daosDataList2, isDoNull: state.isDoNull}),  // 获取 数据处理页面列表，没有传入曲线数据前，获取的是 道列表，也就是默认模板
  {initDaosDataList2,initdocData,initmbData,doNull}        //getDaosMbShow,
)(DataComparison);



 

  